<template>
  <div class="">
    <div id="mapChart" :style="`width:100%;height:100%;`"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters, mapState } from 'vuex'
import axios from 'axios'
import { getRoaminginAndOut } from '@/apis/gis'


export default {
  name: 'migrationMap',
  props: {
    type: {
      type: Number
    },
    ptMonth: {}
  },
  data() {
    return {
      chart: {},
      oldType: 0,
    }
  },
  computed: {
    // ...mapGetters(['userInfo' ]),
   ...mapState(['home']),
    userInfo() {
      return this.home.userInfoVo
    },
    typeTit() {
      let tit = '';
      switch (this.type) {
        case 1:
          tit = '漫入'
          break;
        case 2:
          tit = '漫出'
          break;
        default:
          break;
      }

      return tit;
    }
  },
  watch: {
    type() {
      this.changeMapOpt();
    },
    ptMonth() {
      this.changeMapOpt();
    }
  },
  created() {

  },
  mounted() {
    console.log(this.userInfo, this.type)
    this.initCharts();
    let resize= () => {
      this.chart.resize();
    }
    this.$once('hook:beforeDestroy',()=>{
      window.removeEventListener('resize',resize)
    })
    window.addEventListener('resize', resize)

  },
  methods: {
    initCharts() {
      // this.chart = echarts.init(this.$el);
      let myChart = echarts.init(document.getElementById('mapChart'));
      let mapData = require('/public/mapJson/china.json')//加载本地json文件
      echarts.registerMap('china', mapData);

      // let option = this.getOption();
      // console.log(option);

      // myChart.setOption(option,true);

      this.chart = myChart;

      this.changeMapOpt();

    },
    // 更改当前地图
    changeMapOpt() {

      // 设置全量数据接口参数
      let allDataParams = {
        cityId: this.userInfo.cityId,
        type: this.type,
        ptMonth: this.ptMonth
      }

      if(this.type == 1 || this.type == 2) {

        getRoaminginAndOut(allDataParams)
          .then(result => {
            console.log(result);
            if(result.code == 1) {
              let newData = result.data.map(item => {
                item.value = item.count;
                return item;
              })

              let option = this.getOption(newData);
              this.chart.setOption(option,true);
            }
          })

      }else {
        this.chart.dispose();
        let id = this.userInfo.cityId;
        let currentCity = this.userInfo.cityName
        let myChart = echarts.init(document.getElementById('mapChart'));
        let url = `https://geo.datav.aliyun.com/areas_v2/bound/${id}_full.json`
        axios.get( url )
          .then(res => {
            if(res.status == 200) {
              echarts.registerMap( currentCity, res.data);
              getRoaminginAndOut(allDataParams)
                .then(result => {
                  // console.log(result);
                  if(result.code == 1) {
                    let newData = result.data.map(item => {
                      item.value = item.count;
                      return item;
                    })
                    // console.log(newData);

                    let option = this.getCurrentMap(currentCity, newData);
                    myChart.setOption(option,true);
                    this.chart = myChart;
                  }
                })

            }
            // console.log(res);
          })

        }

    },

    // 获取初始化图表opt
    getOption(newData = [] ) {
      let geoCoordMap = [
        { name: "江苏", id:320000, point:[ 118.8062, 31.9208 ], color:'#4ab2e5' },
        { name: '黑龙江', id:230000, point: [ 127.9688, 45.368 ], color:'#4fb6d2' },
        { name: '内蒙古', id:150000, point: [ 110.3467, 41.4899 ], color:'#52b9c7' },
        { name: "吉林", id:220000, point: [ 125.8154, 44.2584 ], color:'#5abead' },
        { name: '北京市', id:110000, point: [ 116.4551, 40.2539 ], color:'#f34e2b' },
        { name: "辽宁", id:210000, point: [ 123.1238, 42.1216 ], color:'#f56321' },
        { name: "河北", id:130000, point: [ 114.4995, 38.1006 ], color:'#f56f1c' },
        { name: "天津", id:120000, point: [ 117.4219, 39.4189 ], color:'#f58414' },
        { name: "山西", id:140000, point: [ 112.3352, 37.9413 ], color:'#f58f0e' },
        { name: "陕西", id:610000, point: [ 109.1162, 34.2004 ], color:'#f5a305' },
        { name: "甘肃", id:620000, point: [ 103.5901, 36.3043 ], color:'#e7ab0b' },
        { name: "宁夏", id:640000, point: [ 106.3586, 38.1775 ], color:'#dfae10' },
        { name: "青海", id:630000, point: [ 101.4038, 36.8207 ], color:'#d5b314' },
        { name: "新疆", id:650000, point: [ 87.9236, 43.5883 ], color:'#c1bb1f' },
        { name: "四川", id:510000, point: [ 103.9526, 30.7617 ], color:'#b9be23' },
        { name: "重庆", id:500000, point: [ 108.384366, 30.439702 ], color:'#a6c62c' },
        { name: "山东", id:370000, point: [ 117.1582, 36.8701 ], color:'#96cc34' },
        { name: "河南", id:410000, point: [ 113.4668, 34.6234 ], color:'#c1bb1f' },
        { name: "安徽", id:340000, point: [ 117.29, 32.0581 ], color:'#4ab2e5' },
        { name: "湖北", id:420000, point: [ 114.3896, 30.6628 ], color:'#f56f1c' },
        { name: "浙江", id:330000, point: [ 119.5313, 29.8773 ], color:'#f56321' },
        { name: "福建", id:350000, point: [ 119.4543, 25.9222 ], color:'#f58f0e' },
        { name: "江西", id:360000, point: [ 116.0046, 28.6633 ], color:'#f5a305' },
        { name: "湖南", id:430000, point: [ 113.0823, 28.2568 ], color:'#e7ab0b' },
        { name: "贵州", id:520000, point: [ 106.6992, 26.7682 ], color:'#dfae10' },
        { name: "云南", id:530000, point: [ 102.9199, 25.4663 ], color:'#d5b314' },
        { name: "广东", id:440000, point: [ 113.12244, 23.009505 ], color:'#b9be23' },
        { name: "广西", id:450000, point: [ 108.479, 23.1152 ], color:'#a6c62c' },
        { name: "海南", id:460000, point: [ 110.3893, 19.8516 ], color:'#96cc34' },
        { name: '上海', id:310000, point: [ 121.4648, 31.2891 ], color:'#c1bb1f' },
        { name: "西藏", id:540000, point: [ 91.11, 29.97 ], color:'#4ab2e5' },
      ];

      let currentProvince = geoCoordMap.find((item,i) => { return item.id == this.userInfo.provinceId });
      let type = this.type;
      let points = [];
      let lineData = [];

      geoCoordMap.forEach( (item,i) => {
        // 点的数据
        points.push({
          value: item.point,
          provinceName: '',
          count: 0,
          itemStyle:{color: item.color}
        });
        newData.forEach( it => {
          if( it.id == item.id ) {
            points[i].provinceName = it.name;
            points[i].count = it.count;

            if(type == 1){
              lineData.push({
                coords: [ item.point, currentProvince.point ],
                lineStyle:{color: item.color}
              });
            }else{
              lineData.push({
                coords: [ currentProvince.point, item.point ],
                lineStyle:{color: item.color}
              });
            }
          }
        })

      });



      let opt = {
        backgroundColor: '#013954',
        geo: {
          map: 'china',
          aspectScale: 0.75, //长宽比
          roam: true,
          zoom: 1.1,
          left: '15%',
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },

          itemStyle: {
            normal: {
            borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [{
                          offset: 0,
                          color: '#09132c' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#274d68'  // 100% 处的颜色
                      }],
                      globalCoord: true // 缺省为 false
                  },
            },
            emphasis: {
                  areaColor: 'rgb(46,229,206)',
              //    shadowColor: 'rgb(12,25,50)',
                  borderWidth: 0.1
              }
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        series: [
          {
            type: 'map',
            // roam: false,
            geoIndex: 0,
            map: 'china', //使用
            // data: this.difficultData //热力图数据   不同区域 不同的底色
            tooltip: {
              trigger: "item",
              formatter: p => {
                let val = p.value;
                // console.log(p.name);
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  // "<div style='text-align:left'>"+ this.ptMonth + this.typeTit + p.name + "总人数： " + val + '人;</div>';
                  "<div style='text-align:left'>"+ this.typeTit + p.name + "总人数： " + val + '人;</div>';

                return txtCon;
              }
            },
            data:newData
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            zlevel:1,
            left: '15%',
            rippleEffect: {
              period: 15,
              scale: 4,
              brushType: 'fill'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                offset: [15, 0],
                color: '#1DE9B6',
                show: true
              },
            },
            itemStyle: {
              normal: {
                color:'#1DE9B6',
                // color:function (value){ //随机颜色
                //   return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                // },
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            symbolSize: 12,
            tooltip: {
              trigger: "item",
              formatter: (p ) => {
                // console.log(p);
                let val = p.data.count;
                // console.log(p.name);
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  // "<div style='text-align:left'>" + this.ptMonth + this.typeTit + p.data.provinceName + "总人数： " + val + '人;</div>';
                  "<div style='text-align:left'>" + this.typeTit + p.data.provinceName + "总人数： " + val + '人;</div>';

                return txtCon;
              }
            },
            data: points
          }, //地图线的动画效果
          {
            type: 'lines',
            zlevel: 2,
            left: '15%',
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color:'#1DE9B6',
                // color:function (value){ //随机颜色

                //   ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
                //   '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
                //   '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
                //   '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
                //   '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
                //   '#52b9c7','#4fb6d2','#4ab2e5']
                //   return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                // },
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: lineData
        }

        ]

      }

      return opt;
    },

    // 获取 当前市各区地图
    getCurrentMap( mapName , newData) {

      let opt = {
        backgroundColor: '#013954',
        geo: {
          map: mapName,
          aspectScale: 0.75, //长宽比
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },

          itemStyle: {
            normal: {
            borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [{
                          offset: 0,
                          color: '#09132c' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#274d68'  // 100% 处的颜色
                      }],
                      globalCoord: true // 缺省为 false
                  },
            },
            emphasis: {
                  areaColor: 'rgb(46,229,206)',
              //    shadowColor: 'rgb(12,25,50)',
                  borderWidth: 0.1
              }
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        series: [
          {
            type: 'map',
            roam: true,
            geoIndex: 0,
            map: mapName, //使用
            tooltip: {
              trigger: "item",
              formatter: p => {
                let val = p.value;
                // console.log(p.name);
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  // "<div style='text-align:left'>" + this.ptMonth || '上月' + "漫入" + p.name + "总人数： " + val + '人;</div>';
                  "<div style='text-align:left'>"  + "漫入" + p.name + "总人数： " + val + '人;</div>';
                return txtCon;
              }
            },
            data:newData
          },
        ]

      }

      return opt
    },

  }

}
</script>

<style lang="scss" scoped>

#mapChart {
  width: 100%;
  height: 100%;
}

</style>
